<template>
  <!-- <a-drawer
    title="Fault summary"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s"
    :closable="true"
    :mask="false"
    :visible="legInfoVisible"
    @close="onClose"
  > -->

  <a-modal
    :mask-closable="false"
    :visible="legInfoVisibleF"
    title="故障信息"
    :class="['c-dialog-box',singlePage?'c-dialog-box-full':'']"
    :closable="!singlePage"
    :dialog-style="{height:'574px'}"
    :footer="null"
    :width="986"
    :z-index="modalZIndexM"
    destroy-on-close
    centered
    @cancel="onClose"
  >
    <span slot="closeIcon" class="c-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>
    <span v-if="!singlePage" class="new-page-btn" @click="goNewPageHandler"><a-icon :component="require('@/assets/icon/newPage.svg')" /></span>
    <a-spin :spinning="eventListByLegIdLoading" class="c-dialog-search-box">
      <!-- info -->
      <a-row class="c-dialog-search-box-2">
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机号</div>
          <a class="fs-16 fw-b numbers" @click="setState({key:'flightLegHistoryVisible',payload:true})">{{ currentRow.tailnumber||'--' }}</a>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-16 fw-b color-title numbers">{{ currentRow.fleet||'--' }}</div>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">航班</div>
          <a class="fs-16 fw-b numbers" @click="setState({key:'flightLegDetailsVisible',payload:true})">{{ currentRow.flightNo||'--' }}</a>
        </a-col>
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">航段</div>

          <div class="fs-16 fw-b color-title numbers">{{ $legHandler(currentRow.leg, currentRow.totalLeg) }}</div>
        </a-col>
        <a-col :span="5">
          <div class="fw-b fs-12 color-r">机场</div>
          <div class="fs-16 fw-b color-title">
            <a @click="airportInfoHandler(currentRow.dep)">{{ currentRow.dep }}</a>
            <span class="c-arrow color-s">····</span>
            <a @click="airportInfoHandler(currentRow.arr)">{{ currentRow.arr }}</a>
          </div>

        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">日期</div>
          <div class="fw-b fs-13">
            <span class="fs-16 color-title">{{ currentRow.latestAcarsTime? $moment.utc(currentRow.latestAcarsTime).format('YYYY-MM-DD'):'--' }}</span>
          </div>
        </a-col>
        <a-col :span="5">
          <div class="fw-b fs-12 color-r">更新时间</div>
          <div class="fw-b fs-13">
            <span class="fs-16 color-title mr-4">{{ currentRow.latestAcarsTime? $moment.utc(currentRow.updateTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</span>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <a-spin :spinning="eventListByLegIdLoading" class="c-dialog-main-box beauty-scroll">

      <!-- FDE -->
      <div>
        <div v-for="item in tData" :key="item.id" @click="(e)=>clickEvent(e,item)">

          <a-row class="item-details-item-box">

            <a-col :span="3">
              <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
            </a-col>
            <a-col :span="3">
              <a class="fw-b">{{ item.code||'--' }}</a>
            </a-col>
            <a-col :span="12">
              <a class="fw-b  text-over">{{ item.description||'--' }}</a>
            </a-col>
            <a-col :span="4">
              <div class="fs-14 fw-500">{{ item.createTime? $moment.utc(item.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
            </a-col>
            <a-col :span="2">
              <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
            </a-col>

            <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
              <a-row>
                <a-col :offset="3" :span="15 ">
                  <div class="fs-13 text-over">
                    <span class="mr-10 fw-b">{{ ci.name||'--' }}</span><a>{{ ci.code ||'--' }}</a>
                    <div>{{ ci.description ||'--' }}</div>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div class="fs-14 fw-500">{{ ci.createTime? $moment.utc(ci.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                </a-col>
              </a-row>
            </a-col>

          </a-row>
        </div>

        <div class="wgwx-title mt-16 fs-14 fw-b mb-10">非关联的维护信息</div>
        <div v-for="item in bData" :key="item.id" @click="(e)=>clickEvent(e,item)">

          <a-row class="item-details-item-box">

            <a-col :span="3">
              <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
            </a-col>
            <a-col :span="3">
              <a class="fw-b">{{ item.code||'--' }}</a>
            </a-col>
            <a-col :span="12">
              <a class="fw-b  text-over">{{ item.description||'--' }}</a>
            </a-col>
            <a-col :span="4">
              <div class="fs-14 fw-500">{{ item.createTime? $moment.utc(item.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
            </a-col>
            <a-col :span="2">
              <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
            </a-col>

            <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
              <a-row>
                <a-col :offset="3" :span="15">
                  <div class="fs-13 text-over">
                    <span class="mr-10 fw-b">{{ ci.name||'--' }}</span><a>{{ ci.code ||'--' }}</a>
                    <div>{{ ci.description ||'--' }}</div>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div class="fs-14 fw-500">{{ ci.createTime? $moment.utc(ci.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                </a-col>
              </a-row>
            </a-col>

          </a-row>
        </div>

        <div class="wgwx-title mt-16 fs-14 fw-b mb-10">警告信息</div>
        <div v-for="item in alertData" :key="item.id" @click="(e)=>clickEvent(e,item)">

          <a-row class="item-details-item-box">

            <a-col :span="3">
              <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
            </a-col>
            <a-col :span="3">
              <a class="fw-b">{{ item.code||'--' }}</a>
            </a-col>
            <a-col :span="12">
              <a class="fw-b  text-over">{{ item.description||'--' }}</a>
            </a-col>
            <a-col :span="4">
              <div class="fs-14 fw-500">{{ item.createTime? $moment.utc(item.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
            </a-col>
            <a-col :span="2">
              <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
            </a-col>

            <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
              <a-row>
                <a-col :offset="3" :span="15">
                  <div class="fs-13 text-over">
                    <span class="mr-10 fw-b">{{ ci.name||'--' }}</span><a>{{ ci.code ||'--' }}</a>
                    <div>{{ ci.description ||'--' }}</div>
                  </div>
                </a-col>
                <a-col :span="4">
                  <div class="fs-14 fw-500">{{ ci.createTime? $moment.utc(ci.createTime).format('YYYY-MM-DD HH:mm:ss') :'--' }}</div>
                </a-col>
                <a-col :span="2">
                  <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                </a-col>
              </a-row>
            </a-col>

          </a-row>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';

export default {
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    legInfoVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      modalZIndexM: 2000,
      currentRow: {}
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'eventListByLegIdData',
      'eventListByLegIdLoading',
      'modalZIndex'
    ]),
    ...mapGetters('fraMonitoring', [
      'legInfoVisibleF'
    ]),
    tData() {
      return this.eventListByLegIdData.filter(item => {
        return item.name !== 'MMSG' && !(item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert');
      });
    },
    bData() {
      return this.eventListByLegIdData.filter(item => item.name === 'MMSG');
    },
    alertData() {
      return this.eventListByLegIdData.filter(item => {
        return item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert';
      });
    },
    singlePage() {
      return ((this.$route.meta?.singlePage ?? false) && this.$route.query.rp === 'legInfoVisible');
    }

  },
  watch: {
    'legInfoVisibleF': {
      handler(nv) {
        if (nv) {
          this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
          this.modalZIndexM = this.modalZIndex;
          const lsRow = localStorage.getItem('scRow') ?? localStorage.getItem('row');
          this.currentRow = JSON.parse(lsRow) ?? {};

          const params = {
            legId: this.currentRow.id
          };
          this.getEventByLegId(params);
        } else {
          if (nv === false) {
            localStorage.removeItem('scRow');
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getEventByLegId'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),
    // 当drawer点击关闭
    onClose() {
      this.$emit('close', 'legInfoVisible');
    },
    airportInfoHandler(code) {
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    clickEvent(e, eItem) {
      this.setState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = { event: { ...this.currentRow, ...eItem }, ...this.currentRow };
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    goNewPageHandler() {
      const routeData = this.$router.resolve({
        path: '/reportsLayout',
        query: {
          rp: 'legInfoVisible'
        }
      });

      window.open(routeData.href, '_blank');
    }
  }
};
</script>

<style lang="less">
@import './index.less';
</style>
